/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";
$font-family:'微软雅黑',Raleway,sans-serif;

$font-color:#2f2f2f;
$main-color:#319da0;

$information-large: "only screen and (min-width : 1500px)";
$information-phone: "only screen and (max-width : 480px)";
a{
	text-decoration: none;
	cursor: pointer;
	display:block;
}
body{
	background:#fff;
	font-family:$font-family;
}
//基础类
.left{
	float: left;
}
.right{
	float: right;
}
.clear{
	clear:both;
}
.widthAuto{
	width: 90%;
	margin: 0 auto;
	@media #{$information-large} {
		width:90%;
	}
	@media #{$information-phone} {
		width: 100%;
	}
}
.show_desktop{
	display: block;
	@media #{$information-phone} {
		display: none;
	}
}
.show_phone{
	display: none;
	@media #{$information-phone} {
		display: block;
	}
}
.intro_word{
	width:40%;
	z-index:99;
	.title{
		font-size: 36px;
		margin-bottom: 20px;
	}
	p{
		font-size: 18px;
		line-height: 24px;
		margin: 0;
	}
	@media #{$information-large} {
		.title{
			font-size: 52px;
			margin-bottom: 20px;
		}
		p{
			font-size: 24px;
			line-height: 36px;
		}
	}
	@media #{$information-phone} {
		width: 100%;
		margin: 0px auto;
		padding-top:30px;
		.title{
			font-size: 24px;
		}
		p{
			font-size: 14px;
			line-height: 20px;
		}
	}
}
.intro_word.right{
	.title,p{
		text-align: right;
	}
}
.intro_pic{
	z-index:99;
	img{
		height: 400px;
		margin: 100px auto;
		@media #{$information-large} {
			height: 500px;
			margin: 50px auto;
		}
		@media #{$information-phone} {
			width: 90%;
			display: block;
			margin: 0 auto;
			height: auto;
		}
	}
}
// 内容
.section_top{
	.fp-tableCell{
		vertical-align: top;
	}
	overflow:hidden;
	background:url(img/downLoadBg.png) repeat-x 0 -150px ;
	.header{
		height: 110px;
		.logo{
			float: left;
			img{
				float: left;
				width: 180px;
				margin: 10px 0;
			}
			.name{
				float: left;
				font-size: 20px;
				color: $font-color;
				line-height: 110px;
			}
		}
		.menu{
			width: 30px;
			margin: 20px;
			cursor: pointer;
		}
		.nav{
			float: right;
			line-height: 110px;
			li{
				float: left;
				margin: 0 20px;
				a{
					color: $font-color;
					font-size: 18px;
				}
				margin-top: 3px;
			}
			li.active,li:hover{
				border-top: 3px solid $main-color;
				margin-top: 0px;
			}
		}
		@media #{$information-phone} {
			height: auto;
			.nav{
				display: none;
				background:#252525;
				padding:0 30px;
				text-align: center;
				line-height:40px;
				li{
					a{
						color: #ccc;
					}
					width: 100%;
				}
				li.active,li:hover{
					border-top: none;
					margin-top: 0px;
				}
			}
		}
	}
	.download{
		.logo_box{
			width: 250px;
			margin: 70px auto;
			text-align: center;
			color: $font-color;
			img{
				width: 100%;
				margin-bottom: 20px;
			}
			h2{
				font-size: 20px;
				line-height: 20px;
				margin-bottom: 10px;
			}
			h1{
				font-size: 24px;
				line-height: 24px;
			}
			@media #{$information-phone} {
				width: 45%;
				margin: 90px auto;
				margin-bottom: 50px;
				img{
					margin-bottom: 15px;
				}
				h2{
					font-size: 17px;
				}
			}
		}
		.btn{
			width: 450px;
			margin: 50px auto;
			overflow: hidden;
			.android,.ios{
			 	width: 200px;
			 	height: 50px;
			 	line-height: 50px;
			 	color: #fff;
			 	font-size: 18px;
			 	background:$font-color;
			 	img{
			 		width: 40px;
			 		margin: 5px 15px 5px 25px;
			 		float: left;
			 	}
			}
			a.active{
				background:$main-color;
			}
			@media #{$information-phone} {
				width: 100%;
				margin: 0;
				.android,.ios{
					width: 190px;
				    float: none;
				    margin: 0 auto;
				    margin-bottom: 15px;
				    box-shadow:4px 4px 10px rgba(0,0,0,.5);
				}
			}
		}
	}
}
.bg{
	position: absolute;
	width:100%;
	left:0;
	z-index: 1;
	img{
		display: block;
		width: 100%;
	}
}
.section{
	z-index:100;
	position: relative;
	width:100%;
	.content{
		z-index: 100;
		position: relative;
		width: 70%;
		margin: 0 auto;
		height: 600px;
		.intro_word{
			top: 40%;
			@media #{$information-phone} {
				top: 10%;
			}
		}
		.left{
			position: absolute;
			left: 0;
		}
		.right{
			position: absolute;
			right: 0;
		}
		@media #{$information-phone} {
			width: 90%;
			margin: 0 auto;
			height: 65%;
			.intro_word{
				top: 0;
			}
			.intro_pic{
				bottom:0;
			}
		}
	}
	.content2,.content4{
		.intro_pic{
			right: -80%;
			@media #{$information-phone} {
				right: -200%;
				bottom:-200%;
			}
		}
	}
	.content3,.content5{
		.intro_pic{
			left: -80%;
			@media #{$information-phone} {
				left: -200%;
				bottom:-200%;
			}
		}
	}
	.content3 {
		.intro_pic img{
			height: 400px;
			margin:100px auto;
			@media #{$information-phone} {
				width: 100%;
				height: auto;
				margin: 0;
			}
		}
		@media #{$information-phone} {
			height: 55%;
		}
	}
	.content4{
		height:700px;
		margin:0 auto;
		@media #{$information-phone} {
			height: 75%;
			.intro_pic img{
				width: 80%;
			}
		}
	}
}
.section5{
	.show_desktop{
		background:#E5F2F3;
		*background:none;
		width: 80%;
		margin: 30px auto;
		overflow: hidden;
		.right{
			text-align: center;
			img{
				width: 150px;
				margin-bottom: 15px;
			}
			h3{
				font-size: 18px;
				margin-bottom: 10px;
				color: #666;
			}
			a{
				font-size: 24px;
				color:#666;
			}
		}
		@media #{$information-phone} {
			width: 100%;
		}
	}
	.footer{
		background:#2f2f2f;
		padding:50px 0;
		width:100%;
		height:100px;
		.clear{
			width: 80%;
			margin: 0 auto;
			color: #fff;
			.left{
				color: #ccc;
				width: 220px;
				img{
					width: 100px;
				}
				h3{
					margin-top: 40px;
				    line-height: 24px;
				    font-size: 16px;
				}
				h2{
					font-size: 18px;
				    text-align: center;
				    line-height: 24px;
				}
			}
			.right{
				width: 200px;
				margin: 0 auto;
				ul{
					background:url(img/connect.png) no-repeat;
					height: 35px;
					width: 200px;
					margin: 0 auto;
					padding-bottom:5px;
				    border-bottom: 1px solid #ccc;
					margin-bottom: 5px;

				}
				p{
					line-height: 18px;
				    margin-bottom: 3px;
				    color: #ccc;
				    font-size: 14px;
				    text-align: center;
				}
			}
		}
		@media #{$information-phone} {
			height: auto;
			background:url(img/section4_bg.png) no-repeat;
			background-size:100%;
			padding-top: 100px;
			padding-bottom:0;
			.clear{
				background:#E5F2F3;
				width: 100%;
				padding-bottom: 100px;
				.left{
					float: none;
					width: 150px;
					margin: 0px auto;
					margin-bottom: 20px;
					img{
						width: 150px;
					}
					h3,h2{
						margin: 0;
						color: $main-color;
						text-align: center;
					}
					h2{
						margin-bottom: 60px;
					}
				}
				.right{
					float: none;
					p{
						color: $font-color;
					}
				}
			}
		}
	}
}

#fp-nav.right{
	@media #{$information-phone} {
		right:0!important;
	}
}